<script lang="ts">
  import { imageBasePath, variables } from '$store/g';
	import BgImage from '$lib/BgImage.svelte';
</script>
<footer class="h-[304px]">
	<div class="mx-auto pt-[39px] grid grid-cols-9">
		<div class="flex flex-col items-center">
			<div class="md:flex md:items-center md:justify-end">
				<svg
					class="md:flex-grow-0 w-[22px] h-[22px] object-contain fill-current text-primary"
					viewBox="0 0 107 128"
					><title>svelte-logo</title><path
						d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
					/><path
						d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287"
						class="text-white fill-current"
					/></svg
				>
				<span class="footer-item-title">{$variables.siteName}</span>
			</div>
			<div class="footer-item-body">
        <BgImage imgSrc="{$imageBasePath}/{$variables.wechatQRCode}" alt="{$variables.siteName}公众号二维码" classes="w-24 h-24 bg-no-repeat bg-cover bg-center" bgColorClass="bg-[#e7e7e7]">
        </BgImage>
			</div>
		</div>
		<div class="flex flex-col">
			<span class="footer-item-title">解决方案</span>
			<ul class="footer-item-body">
				<li>
          <a href="/solution/group">群小程序</a>
        </li>
				<li><a href="/solution/mall">商城小程序</a></li>
			</ul>
		</div>
		<div>
			<span class="hidden md:flex-grow md:block text-base text-[#333333] font-semibold"
				>帮助支持</span
			>
			<ul class="footer-item-body">
				<li><a href="/partner-plan">合伙人计划</a></li>
				<li><a href="/#">比伶学院</a></li>
				<li><a href="/#">帮助中心</a></li>
			</ul>
		</div>
		<div>
			<span class="footer-item-title">关于我们</span>
			<ul class="footer-item-body">
				<li><a href="/about">公司介绍</a></li>
				<li><a href="/about">加入我们</a></li>
			</ul>
		</div>
		<div class="col-span-2">
			<span class="footer-item-title">友情链接</span>
			<ul class="footer-item-body">
				<li><a href="/#">稿定设计</a></li>
				<li><a href="/#">紫豆助手</a></li>
			</ul>
		</div>
		<div class="col-span-3">
			<span class="footer-item-title">联系方式</span>
			<ul class="footer-item-body">
				<li>地址: 杭州市余杭未来科技城西溪联合科技广场7幢709</li>
				<li>电话: 18258449855</li>
				<li><a href="mailto:pub@originforce.club">邮箱: pub@originforce.club</a></li>
			</ul>
		</div>
	</div>
  <div class="mx-auto w-[800px] mt-[100px] pb-[33px] grid grid-flow-col gap-6 text-[12px] text-[#999999]">
    <div class="text-right">Copyright &#169 2021 杭州量子原力科技有限公司</div>
    <div class="text-left">浙ICP备2021021358号-2</div>
  </div>
</footer>

<style lang="scss">
	.footer-item-title {
		@apply block text-base font-semibold text-[#333333];
	}
	.footer-item-body {
		@apply mt-[20px] text-[14px] text-[#666666] grid grid-flow-row gap-4;
	}
</style>
